<template>
  <div>
    <div>
      <Input style="width: 200px" placeholder="请输入用户名查找" v-model="data6.name" ></Input>
      <Button type="primary" style="padding: 5px;margin: 15px" icon="ios-search" @click="query">搜索</Button>
      <Button type="info" @click="add">增加用户</Button>
    </div>
    <Table border :columns="columns12" :data="tabledata">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="state">
        <Tag  :color="row.state=='正常'?'success':'error'">{{row.state}}</Tag>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
        <Button type="error" size="small" @click="remove(row)">删除</Button>
      </template>
    </Table>
    <el-dialog :visible.sync="addVisible" v-if="addVisible" :close-on-click-modal="false">
      <demo @after="query" @hideDialog="hidden"></demo>
    </el-dialog>

    <el-dialog :visible.sync="editVisible" v-if="editVisible" :close-on-click-modal="false">
      <demo02 @after="query" :data="formData" @hideDialog="hidden"></demo02>
    </el-dialog>

  </div>
</template>

<script>
import demo from "@/components/demo";
import demo02 from "@/components/demo02";

import axiosInstance from "@/api/axios";
import axios from "axios";

export default {
  components: {demo,demo02},
  name: "adduser",
  data() {
    return {
      addVisible: false,
      editVisible:false,
      Tag: "success",
      state: null,
      formData:{},
      columns12: [
        {
          title: '用户名',
          slot: 'name'
        },
        {
          title: '性别',
          key: 'sex'
        },
        {
          title: '所在地区',
          key: 'address'
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '电话',
          key: 'tel'
        },
        {
          title: '出生日期',
          key: 'birthday'
        },
        {
          title: '用户状态',
          slot:"state",
          width: 100,
          align: "center"
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tabledata:[],
      data6:
        {
          name: '',
          sex: '',
          address: '',
          email: '',
          type: '',
          tel: '',
          birthday: '',
        },

    }
  },
  methods: {
    show(row) {
      //所在行的值传输给子组件
      this.formData=row
      this.editVisible=true
    },
    remove(row) {
      this.$confirm('确定删除吗？删除后不可恢复！！！','提示').then(()=>{
        this.http.post("delete",row).then(res=>{
          if (res.data){
            this.$Message.success('删除成功啦')
            this.query();
          }else {
            this.$Message.error('删除失败')
          }
        })
      }).catch(()=>{
        this.$Message.error('取消删除')
      })
    },
    add() {
      this.addVisible = true
    },
    query() {
      this.http.post("query",this.qs.parse(this.data6)).then(res => {
        if (res.data){
          this.tabledata = res.data
        }

      })
    },
    hidden() {
      this.addVisible = false;
       this.editVisible=false;
       this.query();
    },

  },
  created() {
    this.query();
  }
}
</script>

<style scoped>

</style>